<template>
  <div>
    <div class="gva-search-box">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="用户id">
          <el-input v-model="searchInfo.ID" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="用户名字">
          <el-input v-model="searchInfo.userName" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="openID">
          <el-input v-model="searchInfo.openId" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="签到状态">
          <el-select v-model="searchInfo.signStatus" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="问答状态">
          <el-select v-model="searchInfo.askStatus" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="当日滑雪">
          <el-select v-model="searchInfo.skyStatus" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="当日分享">
          <el-select v-model="searchInfo.shareStatus" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="挤牛奶状态">
          <el-select v-model="searchInfo.milkStatus" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间">
          <el-date-picker v-model="searchDate" @change="onDateChange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="download" @click="onDowloadList" :disabled="fullscreenLoading" :loading="fullscreenLoading">导出表格</el-button>
          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table ref="multipleTable" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column align="center" label="ID" width="85" prop="ID" />

        <el-table-column align="center" label="用户名字" prop="userName" />
        <el-table-column align="center" label="用户openID" prop="openId" />
        <!-- <el-table-column align="center" label="创建时间" prop="createTime" /> -->
        <el-table-column align="center" label="用户头像" prop="header">
          <template #default="scope">
            <el-image style="width: 40px" fit="scale-down" :src="scope.row.header" :preview-src-list="[scope.row.header]" :hide-on-click-modal="true" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="奶滴数" prop="milkDripsNum" />
        <el-table-column align="center" label="签到次数" prop="signNum" />
        <el-table-column align="center" label="当日邀请用户" prop="invetNum" />
        <el-table-column align="center" label="小程序完成数" prop="programNum" />
        <el-table-column align="center" label="当日签到状态" prop="signStatus">
          <template #default="scope">
            <el-tag :type="scope.row.signStatus ? '' : 'info'">{{ filterDict(scope.row.signStatus, "g_status") }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当日滑雪状态" prop="skyStatus">
          <template #default="scope">
            <el-tag :type="scope.row.skyStatus ? '' : 'info'">{{ filterDict(scope.row.skyStatus, "g_status") }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="分享朋友圈" prop="shareStatus">
          <template #default="scope">
            <el-tag :type="scope.row.shareStatus ? '' : 'info'">{{ filterDict(scope.row.shareStatus, "g_status") }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="问答状态" prop="askStatus">
          <template #default="scope">
            <el-tag :type="scope.row.askStatus ? '' : 'info'">{{ filterDict(scope.row.askStatus, "g_status") }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="挤牛奶" prop="milkStatus">
          <template #default="scope">
            <el-tag :type="scope.row.milkStatus ? '' : 'info'">{{ filterDict(scope.row.milkStatus, "g_status") }}</el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" label="有效状态（0-有效；1-无效）" prop="isDelete" /> -->
        <!-- <el-table-column align="center" label="活动当前有效时间。校验活动是否为今日活动数据" prop="updateTime" /> -->

        <el-table-column align="center" label="版本号" prop="version" />
        <el-table-column align="center" label="创建时间" width="180">
          <template #default="scope">{{ formatDate(scope.row.createTime) }}</template>
        </el-table-column>
        <!-- <el-table-column align="center" label="按钮组">
          <template #default="scope">
            <el-button type="text" icon="edit" size="small" class="table-button" @click="updateUserInfo(scope.row)">变更</el-button>
            <el-button type="text" icon="delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="用户名字:">
          <el-input v-model="formData.userName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="用户openID:">
          <el-input v-model="formData.openId" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-date-picker v-model="formData.createTime" type="date" style="width: 100%" placeholder="选择日期" clearable />
        </el-form-item>
        <el-form-item label="用户头像:">
          <el-input v-model="formData.header" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="当日滑雪完成状态（0-未完成；1-已完成）:">
          <el-select v-model="formData.skyStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="当日邀请用户数（用于校验邀请人数量状态）3表示已完成:">
          <el-input v-model.number="formData.invetNum" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分享朋友圈状态（0-未分享；1-分享成功）:">
          <el-select v-model="formData.shareStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="问答完成状态（0-未完成；1-已完成）:">
          <el-select v-model="formData.askStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="挤牛奶活动完成状态（0-已完成；1未完成）:">
          <el-select v-model="formData.milkStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="点击进入小程序完成数（进入一个不同的小程序+1）6表示完成活动:">
          <el-input v-model.number="formData.programNum" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="用户拥有的奶滴数量:">
          <el-input v-model.number="formData.milkDripsNum" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="有效状态（0-有效；1-无效）:">
          <el-input v-model.number="formData.isDelete" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="活动当前有效时间。校验活动是否为今日活动数据:">
          <el-date-picker v-model="formData.updateTime" type="date" style="width: 100%" placeholder="选择日期" clearable />
        </el-form-item>
        <el-form-item label="当日签到状态:">
          <el-select v-model="formData.signStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in g_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="签到次数:">
          <el-input v-model.number="formData.signNum" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="版本好:">
          <el-input v-model.number="formData.version" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { createUserInfo, deleteUserInfo, deleteUserInfoByIds, updateUserInfo, findUserInfo, getUserInfoList, getUserInfoListAll } from "@/api/userInfo" //  此处请自行替换地址
import infoList from "@/mixins/infoList"
import { exportExcel } from "@/utils/excel"
export default {
  name: "UserInfo",
  mixins: [infoList],
  data() {
    return {
      fullscreenLoading: false,
      listApi: getUserInfoList,
      dialogFormVisible: false,
      type: "",
      deleteVisible: false,
      multipleSelection: [],
      g_statusOptions: [],
      searchDate: [],
      formData: {
        userName: "",
        openId: "",
        createTime: new Date(),
        header: "",
        skyStatus: undefined,
        invetNum: 0,
        shareStatus: undefined,
        askStatus: undefined,
        milkStatus: undefined,
        programNum: 0,
        milkDripsNum: 0,
        isDelete: 0,
        updateTime: new Date(),
        signStatus: undefined,
        signNum: 0,
        version: 0,
      },
    }
  },
  async created() {
    await this.getTableData()
    await this.getDict("g_status")
  },
  methods: {
    onReset() {
      this.searchInfo = {}
      this.searchDate = []
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    onDateChange(e) {
      if (e) {
        const [start, end] = e
        this.searchInfo.startData = start
        this.searchInfo.endData = end
      } else {
        this.searchInfo.startData = undefined
        this.searchInfo.endData = undefined
      }
    },
    // download
    onDowloadList() {
      this.fullscreenLoading = true
      getUserInfoListAll().then((e) => {
        this.fullscreenLoading = false
        if (!e.headers) {
          exportExcel("用户列表", e)
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteUserInfo(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要删除的数据",
        })
        return
      }
      this.multipleSelection &&
        this.multipleSelection.map((item) => {
          ids.push(item.ID)
        })
      const res = await deleteUserInfoByIds({ ids })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateUserInfo(row) {
      const res = await findUserInfo({ ID: row.ID })
      this.type = "update"
      if (res.code === 0) {
        this.formData = res.data.reuserInfo
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        userName: "",
        openId: "",
        createTime: new Date(),
        header: "",
        skyStatus: undefined,
        invetNum: 0,
        shareStatus: undefined,
        askStatus: undefined,
        milkStatus: undefined,
        programNum: 0,
        milkDripsNum: 0,
        isDelete: 0,
        updateTime: new Date(),
        signStatus: undefined,
        signNum: 0,
        version: 0,
      }
    },
    async deleteUserInfo(row) {
      const res = await deleteUserInfo({ ID: row.ID })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case "create":
          res = await createUserInfo(this.formData)
          break
        case "update":
          res = await updateUserInfo(this.formData)
          break
        default:
          res = await createUserInfo(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "创建/更改成功",
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = "create"
      this.dialogFormVisible = true
    },
  },
}
</script>

<style></style>
